<template>
    <div class="wrapper">
        <div class="add-form">
            <div class="desc">
                <h3>添加字段</h3>
            </div>
            <div class="add-item">
                <button>单行文本</button>
                <button>矩阵单选</button>
                <button>单项选择</button>
                <button>下拉框</button>
            </div>
        </div>
        <div class="fix-form">
            <div class="desc">
                <h3>编辑字段</h3>
            </div>
            <div class="fix-item">
                <router-view/>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped lang="less">

    .desc{
        background-color: dodgerblue;
        color: honeydew;
        border-radius: 5px;
        line-height: 50px;
        padding-left: 20px;
    }
    .add-item{
        height: 110px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-between;
    }
    button{
        width: 200px;
        height: 50px;
        font-size: 18px;
        background-color: #fff;
        border: 1px #808080 solid;
        border-radius: 5px;
    }
    .fix-item{
        padding-left: 20px;
    }
</style>